<template>
  <view class="fm-order-cart">
    <view class="fm-order-cart__modal">
      <view @click="handleVisible" class="fm-order-cart__modal__mask show" v-if="cart.visible"></view>
      <view class="fm-order-cart__modal__main" :class="cart.visible ? 'show' : ''">
        <!-- 满减提示，start -->
        <!-- <view class="fm-order-cart-tips">
          <label>已减12元，再买 </label>
          <label class="hightlight">4.1元 </label>
          <label>可减</label>
          <label class="hightlight">16元</label>
        </view> -->
        <!-- 满减提示，end -->
        <view class="fm-order-cart-content" v-if="cart.visible">
          <view class="fm-order-cart-content__subheader">
            <view>已选中的商品</view>
            <view class="fm-color-text-link">清空购物车</view>
          </view>
          <view class="fm-order-cart-good-group">
            <view class="fm-order-cart-good" v-for="item in _goods" :key="item.skuId">
              <view class="fm-order-cart-good__hd">
                <view class="fm-ellip-1">
                  <label class="title">{{ item.goodName }}</label>
                  <label class="sku-label" v-if="item.skuLabel">[{{ item.skuLabel }}]</label>
                </view>
              </view>
              <view class="fm-order-cart-good__bd">
                <fm-price :price="item.price" class-name="price" currency color="inherit" font-size="16"></fm-price>
              </view>
              <view class="fm-order-cart-good__ft">
                <fm-quantity v-model="item.number"></fm-quantity>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="fm-order-cart__nav">
      <view class="fm-order-cart__nav__badage">
        <fm-button @click="handleVisible" mode="fab" type="primary" :disabled="_badage === 0" no-shadow class-name="fm-order-cart__nav__btn" icon="icon-cart"></fm-button>
        <label class="content" v-if="_badage > 0">{{ _badage }}</label>
      </view>
      <view class="fm-order-cart__nav__main">
        <fm-price v-model="cart.amount" font-size="24" color="#ffffff" currency></fm-price>
      </view>
      <fm-button @click="goCheckout" :disabled="_closed" type="primary" text="去结算" size="l" noShadow inline class-name="fm-order-cart__nav__buy"></fm-button>
    </view>
  </view>
</template>

<script>
import FmButton from '@/components/FmButton'
import FmPrice from '@/components/FmPrice'
import FmQuantity from '@/components/FmQuantity'
export default {
  name: 'OrderCart',
  components: {
    FmButton,
    FmPrice,
    FmQuantity
  },
  data () {
    return {
      cart: {
        badage: 4,
        amount: 1800,
        goods: [],
        visible: false
      },
      closed: false
    }
  },
  computed: {
    _badage () {
      return this.cart.badage || 0
    },
    _amount () {
      return this.$money.f2y(this.cart.amount)
    },
    _closed () {
      return this.closed
    },
    _goods: {
      get () {
        return this.cart.goods
      },
      set (val) {
        this.$emit('change', val)
      }
    }
  },
  methods: {
    goCheckout () {
      this.$wxp.navigateTo({
        url: '/pages/checkout/main'
      })
    },
    handleVisible () {
      const visible = this.cart.visible
      this.cart.visible = !visible
    },
    mockGoods () {
      let tmp = []
      let i = 10
      while (i > 0) {
        tmp.push({
          skuId: i,
          goodName: `商品名称${i}`,
          skuLabel: '大杯, 去冰, 5分糖',
          number: i,
          price: i * 100
        })
        i--
      }
      this.cart.goods = tmp
    }
  },
  mounted () {
    this.mockGoods()
  }
}
</script>

<style lang="less">
@import "../../asset/style/_variable.less";

.fm-order-cart {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

.fm-order-cart__nav {
  position: relative;
  display: flex;
  height: 48px;
  padding: 8px;
  align-items: center;
  background-color: @--color-text-regular;
  z-index: @zindex-navbar-fixed;
}

.fm-order-cart__nav__badage {
  position: relative;
  bottom: 8px;
  display: inline-flex;
  flex: none;

  .content {
    position: absolute;
    right: -2px;
    top: 2px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 9px;
    background-color: @--color-danger;
    font-family: Tahoma;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    color: @--color-white;
    padding-right: 1px;
    padding-left: 1px;
  }
}

.fm-order-cart__nav__btn {
  position: relative;
  right: unset;
  bottom: unset;
  height: 48px !important;
  width: 48px !important;
  z-index: unset;
}

.fm-order-cart__nav__main {
  flex: auto;
  color: @--color-white;
  padding-right: 16px;
  padding-left: 16px;
}

.fm-order-cart__nav__buy {
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 0;
  padding: 0 32px;
}

.fm-order-cart__modal {
}

.fm-order-cart__modal__mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background-color: @--color-black;
  opacity: 0;
  transition: @--all-transition;//@--fade-transition;
  z-index: 800;

  &.show {
    opacity: .5;
  }
}

.fm-order-cart__modal__main {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 900;
  padding-bottom: 48px;
  overflow: hidden;

  &.show {
    box-shadow: @--box-shadow-dark;
  }
}

.fm-order-cart-tips {
  position: relative;
  display: flex;
  text-align: center;
  height: @--font-line-height-primary;
  line-height: @--font-line-height-primary;
  background-color: #fffad6;
  font-size: 11px;  //@--font-size-small;
  justify-content: center;
  opacity: .96;
  color: @--color-text-regular;
  z-index: @zindex-navbar;

  &::before {
    .setTopLine(#f9e8a3);
  }

  .hightlight {
    color: @--color-danger;
  }
}

.fm-order-cart-content {
  position: relative;
  display: block;
  background-color: @--fill-base;
}

.fm-order-cart-content__subheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 36px;
  background-color: @--background-color-base;
  font-size: @--font-size-base;
  // font-weight: @--font-weight-blod;
}

.fm-order-cart-good-group {
  display: block;
  padding: 0 16px;
  max-height: 60vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.fm-order-cart-good {
  position: relative;
  display: flex;
  height: 48px;
  align-items: center;

  &:not(:last-child) {
    &::after {
      .setBottomLine(@--border-color-lighter);
    }
  }
}

.fm-order-cart-good__hd {
  flex: auto;
  overflow: hidden;

  .sku-label {
    font-size: 11px;
    color: @--color-text-secondary;
    margin-left: 8px;
  }
}

.fm-order-cart-good__bd {
  flex: none;
  margin-left: 16px;
  text-align: right;
  width: 60px;

  .price {
    font-weight: @--font-weight-base;
  }
}

.fm-order-cart-good__ft {
  flex: none;
  margin-left: 16px;
  text-align: right;
  width: 90px;
}
</style>
